<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div style="position: relative">
      <img :src="tireImg" :style="tireImgStyle"/>
      <div :id="uniqueID" style="height: 100%;margin-top: 1%;" />
    </div>
    <div :id="uniqueID2" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'ProductConsume',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: '',
      uniqueID2: '',
      tireImg: require('@/assets/linglong/tire.gif')
    }
  },
  created() {
    this.uniqueID = uuidv1()
    this.uniqueID2 = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale

    var option = {
      series: [{
        name: '第一个圆环',
        type: 'pie',
        clockWise: false,
        radius: ['80%', '90%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            shadowBlur: 0
          }
        },
        hoverAnimation: false,
        data: [{
          value: 986,
          label: {
            normal: {
              rich: {
                a: {
                  color: '#FFFD9B',
                  align: 'center',
                  fontSize: 48 * scale
                },
                b: {
                  color: '#fff',
                  align: 'center',
                  fontSize: 24 * scale
                }
              },
              formatter: function(params) {
                return '{b|实时总产量}' + '\n\n{a|' + params.value + '}'
              },
              position: 'center',
              show: true,
              textStyle: {
                fontSize: 14 * scale,
                fontWeight: 'normal',
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#2c6cc4',
              shadowColor: '#2c6cc4',
              shadowBlur: 0
            }
          }
        }, {
          value: 1200,
          name: 'invisible',
          itemStyle: {
            normal: {
              color: '#4FC7FF'
            },
            emphasis: {
              color: '#4FC7FF'
            }
          }
        }]
      }]
    }

    myChart.setOption(option)

    var myChart2 = echarts.init(document.getElementById(this.uniqueID2))

    var option2 = {
      tooltip: null,
      legend: {
        data: ['煤', '煤1', '天然气', '天然气1'],
        right: 20 * scale,
        orient: 'vertical',
        show: false
      },
      graphic: [
        {
          type: 'group',
          right: 0,
          top: 40 * scale,
          children: [
            {
              type: 'circle',
              id: 'circle1',
              right: 160 * scale,
              shape: {
                cx: 0,
                cy: 0,
                r: 5 * scale
              },
              style: {
                fill: '#E5E36B',
                stroke: '#E5E36B'
              }
            },
            {
              type: 'circle',
              id: 'circle2',
              right: 140 * scale,
              shape: {
                cx: 0,
                cy: 0,
                r: 5 * scale
              },
              style: {
                fill: '#EDAF33',
                stroke: '#EDAF33'
              }
            },
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                fill: '#E5E36B',
                text: '全钢轮胎产量与产品单耗',
                fontSize: 24 * scale
              }
            }
          ]
        },
        {
          type: 'group',
          right: 0,
          top: 1,
          children: [
            {
              type: 'circle',
              id: 'circle3',
              right: 160 * scale,
              shape: {
                cx: 0,
                cy: 0,
                r: 5 * scale
              },
              style: {
                fill: '#4FC7FF',
                stroke: '#4FC7FF'
              }
            },
            {
              type: 'circle',
              id: 'circle4',
              right: 140 * scale,
              shape: {
                cx: 0,
                cy: 0,
                r: 5 * scale
              },
              style: {
                fill: '#18A2E2',
                stroke: '#18A2E2'
              }
            },
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                fill: '#4FC7FF',
                text: '半钢轮胎产量与产品单耗',
                fontSize: 24 * scale
              }
            }
          ]
        }
      ],
      color: ['#E5E36B', '#4FC7FF', '#EDAF33', '#18A2E2'],
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#ffffff'
          }
        }
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          textStyle: {
            color: '#ffffff'
          }
        },
        data: ['11-22', '11-23', '11-24', '11-25', '11-26', '11-27', '11-28']
      },
      series: [
        {
          name: '煤',
          type: 'bar',
          stack: '总量',
          barWidth: 20 * scale,
          data: [3200, 3020, 3010, 3304, 3900, 300, 3000]
        },
        {
          name: '天然气',
          type: 'bar',
          stack: '总量',
          barWidth: 20 * scale,
          data: [1200, 1320, 1010, 1340, 900, 2300, 2100]
        },
        {
          name: '煤1',
          type: 'bar',
          stack: '总量1',
          barWidth: 20 * scale,
          data: [3200, 3020, 3010, 3304, 3900, 300, 300]
        },
        {
          name: '天然气1',
          type: 'bar',
          stack: '总量1',
          barWidth: 20 * scale,
          data: [1200, 1320, 1010, 1340, 900, 2300, 2100]
        }
      ]
    };

    myChart2.setOption(option2)

    window.addEventListener('resize', () => {
      myChart.resize()
      myChart2.resize()
    })
  },
  computed: {
    tireImgStyle() {
      return {
        height: 200 * this.$root.setting.scale + 'px',
        width: 200 * this.$root.setting.scale + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .g-container {
    width: 100%;
    display: grid;
    grid-template-columns: 255px calc(100% - 255px);

    img {
      position:absolute;
      top: 50%;
      left:50%;
      transform: translate(-50%,-50%)
    }
  }
</style>
